<template>
	<view class="content">
		<topBox></topBox>
		<view class="list-wrap">
			<view class="list-item" v-for="(item, index) in list" :key="item.recruit_id">
				<view class="item-title">
					<text class="name">
						{{ item.recruit_type_work }}
					</text>
					<text class="price">{{ item.recruit_salary }}</text>
				</view>
				<view class="item-con">
					<view class="con-row">
						<text class="txt">地址：</text>
						<view class="txt-con">{{ item.recruit_address }}</view>
					</view>
					<view class="flex" style="margin-bottom: 10rpx;">
						<view class="txt">
							发布时间：{{item.recruit_create_time}}
						</view>
						<view class="status">
							<text>距离您{{item.recruit_distance}}公里</text>
						</view>
					</view>
				</view>
				<view class="" v-if="item.intermediary_recruit != ''">
					<view class="small_item bottom" style="margin: 10rpx 0;" v-for="(reItem, reIndex) in item.intermediary_recruit" :key="reItem.receiving_intermediary_rid">
						<view class="flex" style="height: 100rpx;line-height: 100rpx;justify-content: space-around;background: #999;">
							<u-avatar style="display: flex;" size="80" :src="reItem.avatarUrl" mode="circle"></u-avatar>
							<view class="td name">{{reItem.nickname}}</view>
							<view class="td phone" @click="callPhone(reItem.phone)">{{reItem.phone}}</view>
							<!-- <view class="td name">id： {{sGitem.receiving_id}}</view> -->
							<!-- <u-button v-if="!sGitem.receiving_submit_time" size="mini" type="primary" @click="showFormS(sGitem)">添加员工</u-button> -->
						</view>
						<view class="staff_info" style="margin: 10rpx 0;" v-for="(sGitem, sIndex) in reItem.receiving" :key="sGitem.receiving_id">
							<view class="tr flex border_bottom">
								<block v-if="sGitem.receiving_submit_time">
									<view class="td border_right over-word">{{sGitem.receiving_name || '-'}}</view>
									<view class="td phone border_right" @click="callPhone(sGitem.receiving_mobile)">{{sGitem.receiving_mobile || '-'}}</view>
								</block>
								<block v-else>
									<u-avatar class="td border_right" size="60" :src="sGitem.avatarUrl" mode="circle"></u-avatar>
									<view class="td border_right over-word">{{sGitem.nickname}}</view>
								</block>
								
								<view class="td code border_right">
									<u-button size="mini" type="primary" @click="showImg(sGitem)">身份证</u-button>
								</view>
								<!-- <view class="td phone over-word" style="flex: 1;">{{sGitem.receiving_id_card || '-'}}</view> -->
							</view>
							<view class="tr flex border_bottom">
								<view class="td border_right">
									{{sGitem.receiving_time ? sliceStr(sGitem.receiving_time) : '-'}}
								</view>
								<view class="td phone border_right">
									{{sGitem.receiving_submit_time ? sliceStr(sGitem.receiving_submit_time) : '-'}}
								</view>
								<view class="td phone border_right">
									{{sGitem.receiving_entry_time ? sliceStr(sGitem.receiving_entry_time) : '-'}}
								</view>
								<view class="td">
									{{sGitem.receiving_quit_time ? sliceStr(sGitem.receiving_quit_time) : '-'}}
								</view>
							</view>
							<view class="tr flex">
								<view class="td border_right">报名</view>
								<view class="td phone border_right">提交</view>
								<!-- 没有提交 或者有了入职时间 -->
								<u-button class="td phone border_right" :disabled="!sGitem.receiving_submit_time || sGitem.receiving_entry_time " size="mini" type="primary" @click="changeState(sGitem,1)">入职</u-button>
								<!-- 没有提交日期 不能报名，不能离职， 报名> 提交> 入职> 离职 -->
								<!-- 没有入职时间 或者有了离职时间 -->
								<u-button class="td order_bottom" size="mini" :disabled="!sGitem.receiving_entry_time || sGitem.receiving_quit_time" type="primary" @click="changeState(sGitem,2)">离职</u-button>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="bottom flex">
					<view class="small_item">
						<view class="tr flex">
							<view class="td">
								<u-avatar class="headImg" src="../../static/image/aboutus-logo.png" mode="square"></u-avatar>
							</view>
							<view class="td name">张三</view>
							<view class="td phone">13557886557</view>
						</view>
						<view class="staff_info">
							<view class="tr flex border_bottom">
								<view class="td flex name border_right">
									<view>
										<u-avatar class="headImg" src="../../static/image/aboutus-logo.png" mode="square"></u-avatar>
									</view>
									<view>张三</view>
								</view>
								<view class="td phone border_right">13557886557</view>
								<view class="td code border_right">
									<u-button size="mini" type="primary" @click="show=true">身份证</u-button>
								</view>
								<view class="td status">
									<u-button size="mini" type="primary">入职</u-button>
								</view>
							</view>
							<view class="tr flex border_bottom">
								<view class="td border_right">20.12.12</view>
								<view class="td phone border_right">20.12.13</view>
								<view class="td code border_right">20.12.14</view>
								<view class="td">20.12.15</view>
							</view>
							<view class="tr flex border_bottom">
								<view class="td border_right">报名</view>
								<view class="td phone border_right">提交</view>
								<view class="td code border_right">入职</view>
								<view class="td">离职</view>
							</view>
						</view>
					</view>
				</view> -->
			</view>
			<!-- 查看身份证 -->
			<u-popup v-model="showImgeModel" mode="center" width="600rpx" height="500rpx">
				<view class="codePup">
					<image class="del" src="/static/image/del.png" mode="" @click.stop="showImgeModel = false"></image>
					<image class="img" :src="imgCodeUrl" mode="aspectFill"></image>
				</view>
			</u-popup>
			<!-- 数据为空 -->
			<u-empty v-if="list.length == 0" text="暂无数据~" :margin-top="100"></u-empty>
			<!-- 加载更多 -->
			<u-loadmore v-if="list.length" :status="loadStatus" bg-color="#f5f8ff" :margin-top="20" :margin-bottom="20" />
		</view>
		<tabBar :selected="1"></tabBar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import topBox from '../../components/top-box/top-box.vue';
import tabBar from '../../components/tabBar/tabBar.vue';
export default {
	components: {
		topBox,
		tabBar
	},
	data() {
		return {
			videoCurrTime: 0,
			videoTitle: 'zhemvopswemvop    wjfopjeowjmpiojm',
			customStyle: {
				background: '#E04110',
				border: 'none',
				color: '#fff'
			},
			loadStatus: 'nomore',
			params: {
				startRow: 1,
				rowSize: 6,
				latitudes: 32,
				longitudes: 43,
				status: 'FB'
			},
			list: [],
			imageCode: '',
			show: false,
			userId: '',
			role: uni.getStorageSync('role'),
			imgCodeUrl: '',
			showImgeModel: false,
		};
	},
	computed: {
		...mapState({
			// userId: state => state.userId
		})
	},
	onShow() {},
	onLoad(e) {
		this.userId = uni.getStorageSync('userId');
		let token = uni.getStorageSync('token');
		if (token) {
			// this.generateCode();
		}
		if (e.scene) {
			let scene = decodeURIComponent(e.scene);
			uni.setStorageSync('recId', e.scene);
		}
	
		uni.getLocation({
			type: 'wgs84',
			success: res => {
				this.params.latitudes = res.latitude;
				this.params.longitudes = res.longitude;
				this.postGetActivityList('up');
			}
		});
	},
	onPullDownRefresh() {
		this.dropDown();
	},
	onReachBottom() {
		this.pullUp();
	},
	onShareAppMessage(res) {
		const userInfo = uni.getStorageSync('userInfo')
		if(this.role == 'big') {
			const {id, name} = userInfo
			return {
				title: `嗨！我邀请你成为的专属代理啦`,
				imageUrl: '../../static/image/share.jpg',
				path: '/pages/share/invitation?recId=' + id + '&name=' + name
			}
		} else {
			return {
				title: `嗨！快来加入我们平台吧`,
				imageUrl: '../../static/image/share.jpg',
				path: 'pages/index/full-screen'
			}
		}
	},
	methods: {
		callPhone(phone) {
			if(!phone) return
			uni.makePhoneCall({
				phoneNumber: '' + phone
			})
		},
		showImg(sGitem) {
			this.imgCodeUrl = sGitem.receiving_id_card;
			this.showImgeModel = true
		},
		toDesc(recruit_id){
			if(!recruit_id){
				return uni.showToast({
					title:'数据异常，请稍后再试',
					icon:'none'
				})
			}
			uni.navigateTo({
				url:'../preview/previewDetail?recruit_id='+recruit_id
			})
			console.log(recruit_id)
		},
		goPublish(){
			uni.navigateTo({
				url:'../talent/publish-post'
			})
		},
		reEdit(recruit_id) { // 编辑重发
			uni.navigateTo({
				url: '/pages/talent/publish-post?reId=' + recruit_id
			})
		},
		clickFormView(event) {
			let formId = event.detail.formId;

			// 忽略开发者工具里边的formId
			if (formId && formId !== 'the formId is a mock one') {
				wx.request({
					method: 'POST',
					url: '/api/collectFormId', // 该接口只用来收集formId
					data: { formId: formId } // 只传了一个formId，因为openid和当前用户通常会事先在后台做一个关联，看具体业务了
				});
			}
			// 然后可以干其他事了，比如跳转页面，其他业务逻辑
			// TODO
		},
		makeCall(item) {
			uni.makePhoneCall({
				phoneNumber: item.recruit_link_tel
			});
		},
		queryActOrder() {
			return new Promise((resolve, reject) => {
				let params = {};
				this.$u.api.postQueryActOrder(params).then(res => {
					if (res.code == 1000) {
						let data = res.data;
						if (data.isfree) {
							uni.navigateTo({
								url: '/pages/order/place-order?id=' + data.id
							});
						}
						resolve();
					}
				});
			});
		},
		// 下拉刷新
		dropDown() {
			console.log('down');
			// 修改当前view的数据
			this.params.startRow = 1;
			// 加载下拉刷新的数据
			this.postGetActivityList('down');
		},
		// 上拉加载
		pullUp() {
			console.log('up');
			// 增加页数
			this.params.startRow++;
			// 请求获取数据
			this.postGetActivityList('up');
		},
		// 活动管理-查询活动列表
		postGetActivityList(type) {
			this.$u.api
				.postMyRecruits(this.params)
				.then(res => {
					uni.stopPullDownRefresh();
					if (res.status == true) {
						let data = res.data;
						// 如果是上拉加载
						if (type == 'up') {
							// 判断分页
							if (res.data.length <= this.params.rowSize) {
								for (var i = 0; i < res.data.length; i++) {
									this.list.push(res.data[i]);
								}
								this.loadStatus = 'loading';

								// 如果数量小于页容量，显示没有更多数据
								if (res.data.length < this.params.rowSize) {
									this.loadStatus = 'nomore';
								}
							} else {
								this.params.rowSize = res.data.total;
								this.loadStatus = 'nomore';
							}
						}

						// 如果是下拉刷新
						if (type == 'down') {
							// 将数据
							for (var i = 0; i < res.data.length; i++) {
								this.list.push(res.data[i]);
							}

							this.list.splice(0, this.list.length == 0 ? 0 : this.list.length - res.data.length);
						}
					}
				})
				.catch(err => {
					uni.stopPullDownRefresh();
				});
		},
		placeOrder(itemId) {
			let token = uni.getStorageSync('token');
			if (token) {
				let params = {
					id: itemId
				};
				this.$u.api.postReceiving(params).then(res => {
					if (res.status == true) {
						uni.showToast({
							title: res.msg,
							duration: 2000
						});
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000
						});
					}
				});
			} else {
				uni.redirectTo({
					url: '/pages/login'
				});
			}
		},
		generateCode() {
			let params = {
				busiType: 1,
				busiId: uni.getStorageSync('userId') + ',GG',
				url: 'pages/index/index'
			};
			this.$u.api.postGenerateQrCode(params).then(res => {
				if (res.status == true) {
					this.imageCode = 'data:image/jpeg;base64' + res.data;
				}
			});
		},
		close(){
			this.show = false
		},
		changeState(row, status) {
			this.$u.api.changeStatus({receiving_id: row.receiving_id, receiving_status: status}).then(res => {
				if (res.status == true) {
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					this.list = []
					this.params.startRow = 1
					this.postGetActivityList('up');
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			})
		},
		sliceStr(str) {
			if(!str || typeof str !== 'string') return
			return str.slice(0, 10).replace(/-/g, '.')
		}
	}
};
</script>
<style lang="scss" scoped>
.flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content {
	position: relative;
	// padding-top: 240upx;
	padding-bottom: 30rpx;	
	.publish_btn{
		margin: 20upx;
	}
	.list-wrap {
		padding: 0 20upx 20upx;
		position: relative;
		z-index: 10;
		.list-item {
			padding: 30upx 20upx 10upx;
			background: #fff;
			box-shadow: 0px 3px 7px 0px rgba(218, 218, 218, 0.35);
			border-radius: 6px;
			margin-bottom: 20upx;

			.item-title {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24upx;

				.name {
					font-size: 30upx;
					font-weight: bold;
					color: rgba(101, 101, 101, 1);
				}

				.price {
					font-size: 26upx;
					font-weight: bold;
					color: rgba(236, 71, 21, 1);
				}
			}

			.item-con {
				border-bottom: 1px solid rgba(221, 221, 221, 1);
				margin-bottom: 10upx;
				padding-bottom: 10upx;

				.con-row {
					display: flex;
					font-size: 24upx;
					font-weight: 500;
					color: rgba(101, 101, 101, 1);
					line-height: 34upx;
					margin-bottom: 18upx;

					.txt {
						flex: none;
						color: #999;
						margin-right: 10upx;
					}

					.txt-info {
						flex: 1;
					}
				}

				.flex-row {
					display: flex;
					justify-content: space-between;

					.row {
						font-size: 24upx;
						font-weight: 500;
						color: rgba(153, 153, 153, 1);
						margin-bottom: 18upx;
					}
				}

				.img-box {
					flex: 1;
					margin-right: 20upx;

					.img {
						width: 90upx;
						height: 90upx;
						border-radius: 6px;
						margin-right: 10upx;
					}
				}
			}
			
			.bottom{
				border: 1px solid #C0C0C0;
				.tr{
					// padding: 0upx 10upx;
				}
			}
			.small_item {
				margin: 20rpx 0;
				width: 100%;
				.item_top{
					padding-top: 10upx;
					background-color: #E04110;
					color: #FFFFFF;
				}
				.headImg {
					width: 50upx;
					height: 50upx;
					border-radius: 100upx;
				}
				.staff_info{
					border-top: 1px solid #C0C0C0;
					// display: table;
					// margin-bottom: 20upx;
					.td{
						width: 25%;
						height: 80upx;
						word-break: break-word;
						text-align: center;
						&.phone{
							width: 30%;
						}
						&.code{
							width: 20%;
						}
					}
					.td:not(.name){
						line-height: 80upx;
					}
					.border_right{
						border-right: 1px solid #C0C0C0;
					}
					.border_bottom{
						border-bottom: 1px solid #C0C0C0;
					}
				}
			}
		}
	}
}
.upload-img {
	display: inline-block;
	width: 146rpx;
	height: 146rpx;
	margin: 14rpx;
	text-align: center;
	color: #999999;
	border: 2rpx solid #E1E1E1;
	border-radius: 4rpx;
	padding: 40rpx 0;
	background: #eee;
}
.codePup {
	position: relative;
}

.codePup .img {
	width: 500upx;
	height: 500upx;
}

.del {
	width: 100rpx !important;
	height: 100rpx !important;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 999;
}
.over-word{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.popup{
		margin: 20upx;
	}
</style>
<!-- 
<style lang="scss" scoped>
.flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.content {
	position: relative;
	// padding-top: 146upx;
	.publish_btn{
		margin: 20upx;
	}
	.list-wrap {
		padding: 0 20upx 20upx;
		position: relative;
		z-index: 10;
		.list-item {
			padding: 30upx 20upx 10upx;
			background: #fff;
			box-shadow: 0px 3px 7px 0px rgba(218, 218, 218, 0.35);
			border-radius: 6px;
			margin-bottom: 20upx;

			.item-title {
				display: flex;
				justify-content: space-between;
				margin-bottom: 24upx;

				.name {
					font-size: 30upx;
					font-weight: bold;
					color: rgba(101, 101, 101, 1);
				}

				.price {
					font-size: 26upx;
					font-weight: bold;
					color: rgba(236, 71, 21, 1);
				}
			}

			.item-con {
				border-bottom: 1px solid rgba(221, 221, 221, 1);
				margin-bottom: 10upx;
				padding-bottom: 10upx;

				.con-row {
					display: flex;
					font-size: 24upx;
					font-weight: 500;
					color: rgba(101, 101, 101, 1);
					line-height: 34upx;
					margin-bottom: 18upx;

					.txt {
						flex: none;
						color: #999;
						margin-right: 10upx;
					}

					.txt-info {
						flex: 1;
					}
				}

				.flex-row {
					display: flex;
					justify-content: space-between;

					.row {
						font-size: 24upx;
						font-weight: 500;
						color: rgba(153, 153, 153, 1);
						margin-bottom: 18upx;
					}
				}

				.img-box {
					flex: 1;
					margin-right: 20upx;

					.img {
						width: 90upx;
						height: 90upx;
						border-radius: 6px;
						margin-right: 10upx;
					}
				}
			}
			
			.bottom{
				border: 1px solid #C0C0C0;
				.tr{
					padding: 0upx 10upx;
				}
			}
			.small_item {
				margin: 10upx 0;
				width: 100%;
				.headImg {
					width: 80upx;
					height: 80upx;
					border-radius: 100upx;
				}
				.staff_info{
					border-top: 1px solid #C0C0C0;
					margin-bottom: 20upx;
					.td{
						width: 25%;
						height: 100upx;
						word-break: break-word;
						text-align: center;
						&.phone{
							width: 30%;
						}
						&.code{
							width: 20%;
						}
					}
					.td:not(.name){
						line-height: 100upx;
					}
					.border_right{
						border-right: 1px solid #C0C0C0;
					}
					.border_bottom{
						border-bottom: 1px solid #C0C0C0;
					}
				}
			}
		}
	}
}
.codePup {
	position: relative;
}

.codePup .img {
	width: 500upx;
	height: 500upx;
}

.del {
	width: 80rpx !important;
	height: 80rpx !important;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 999;
}
</style>
 -->